import React, { Component } from 'react'

import { Row, Col, Icon, Button, Modal } from 'antd';
import { FormComponentProps } from "antd/lib/form/Form";
import { connect } from 'dva';
import ChangePassword from './components/PasswordForm'
import Avatar from '@/assets/avatar.png'
import { ItemValue, ItemLabel, MyAvatar, Items } from './styled'
import { DividerItem } from '@/components/DividerItem';

interface IArea {
  id: number,
  name: string
}

interface IProps extends FormComponentProps {
  dispatch?: Function,
  info: {
    loginName: string,
    realName: string,
    mobile: string,
    photo: string,
    areaName: Array<IArea>,
    companyName: string
  },
}

@connect(({ user }) => ({
  info: user.details
}))
class Info extends Component<IProps> {
  state = {
    loading: false,
    visible: false,
    confirmDirty: false,
  }

  showModal = () => {
    this.setState({
      visible: true
    })
  }

  handleConfirmBlur = e => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  };

  handleOk = () => {
    this.setState({ loading: false, visible: false });
  };

  handleCancel = () => {
    this.setState({ visible: false });
  };

  render() {

    const { info } = this.props;
    const { visible } = this.state;
		const Header = DividerItem('user', '个人中心'); 

    return (
      <>
        <Header/>
        <Row style={{ background: '#fefefe', marginTop: -30, height: '230px'}}>
          <Col span={8} style={{ borderRight: '1px solid #ccc', height: '100%' }} >
            {
              info && info.photo ? <MyAvatar size={104} src={Avatar} /> :
                <MyAvatar size={104} icon="user"></MyAvatar>
            }
            <h3 style={{margin: '-39px auto', width: '83px', fontSize: '16px', color: '#0880DF', fontWeight: 400}}>消防管理员</h3>
          </Col>
          <Col span={16} style={{  borderRight: 0, borderBottom: 0, paddingLeft: '50px', marginTop: 50 }}>
            <Row>
              <Col span={12}>
              <Items><Icon type="user" style={{marginRight: 10}}/><ItemLabel>登录名称：</ItemLabel><ItemValue>{info ? info.loginName : ''}</ItemValue></Items>
              <Items><Icon type="user" style={{marginRight: 10}}/><ItemLabel>真实姓名：</ItemLabel><ItemValue>{info ? info.realName : ''}</ItemValue></Items>
              </Col>
              <Col span={12}>
              <Items><Icon type="phone" style={{marginRight: 10}}/><ItemLabel>联系电话：</ItemLabel><ItemValue>{info ? info.mobile : ''}</ItemValue></Items>
              <Items><Icon type="home" style={{marginRight: 10}}/><ItemLabel>公司名称：</ItemLabel><ItemValue>{info ? info.companyName : ''}</ItemValue></Items>
              </Col>
            </Row>
            <div style={{marginLeft: '75%'}}>
            <Button style={{ marginTop: 10 }}
              onClick={() => {
                window.history.back();
              }}
            >取消</Button>
            <Button style={{ marginTop: 10 , backgroundColor: '#0880DF', color: 'white', marginLeft: 30 }}
              onClick={() => {
                this.showModal();
              }}
            >修改密码</Button>
        
          </div>

          </Col>
          <Modal
            visible={visible}
            title="修改密码"
            onCancel={this.handleCancel}
            footer={null}
          >
            <ChangePassword
              onCancel={this.handleCancel}
              onSubmit={this.handleOk}
            />
          </Modal>
        </Row>
        <Row style={{height: 29, backgroundColor: '#F0F3FA'}}>

        </Row>
      </>
    )
  }
}

export default Info;